<template>
    <div>
        <ul>
            <li v-for="item in 10" :key="item" @click="change(item)" :class="{active:index==item}">{{item}}</li>
        </ul>
    </div>
</template>
<script>
import {ref,onMounted} from 'vue'
export default {
    beforeCreate() {
       console.log('beforeCreate'); 
    },
    created() {
         console.log('created')
    },
    
    // setup是一个生命周期钩子函数 不用调用，就会执行，比beforeCreate，created更早执行
    setup(props) {
      console.log('setup');
       const  index = ref(1)
       const change = (item)=>{
           index.value = item
       } 
       onMounted(()=>{
        console.log('onMounted');
       })
       return {change,index}
    },
   
}
</script>
<style lang="scss" scoped>
.active{
    background: pink;
}
</style>
